@mixin placeholder($font-size: 16px, $color: #eee) {
  ::-webkit-input-placeholder {
      font-size: $font-size;
      color: $color;
  }
}

@mixin border-radius($direction, $value: 4px) {
  @if $direction == top or $direction == bottom {
      border-#{$direction}-left-radius: $value;
      border-#{$direction}-right-radius: $value;
  }
  @else {
      border-top-#{$direction}-radius: $value;
      border-bottom-#{$direction}-radius: $value;
  }
}

@mixin ellipsis($line: 1) {
  overflow: hidden;
  text-overflow: ellipsis;

  @if $line==1 {
      white-space: nowrap;
      word-wrap: normal;
  }

  @else {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: $line;
  }
}

@mixin flex($justify-content: space-between, $align-items: center) {
  display: flex;
  justify-content: $justify-content;
  align-items: $align-items;
}

@mixin flex-column($justify-content: space-between, $align-items: center) {
  display: flex;
  justify-content: $justify-content;
  align-items: $align-items;
  flex-direction: column;
}

@mixin prefect-scrollbar(
  $width: 8px,
  $borderRadius: 8px,
  $bgColor: #606060,
  $hoverColor: #909090
) {
  &::-webkit-scrollbar {
    width: $width;
  }
  &::-webkit-scrollbar-thumb {
    background-color: $bgColor;
    border-radius: $borderRadius;
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: $hoverColor;
  }
}
